<template>
    <div>
        <h3>门店添加</h3>
        {{ info }}
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="info.shopName"></td>
                </tr>
                <tr>
                    <td align="right">分店名称</td>
                    <td><input type="text" v-model="info.branchName"></td>
                </tr>
                <tr>
                    <td align="right">门店图片</td>
                    <td><input type="file" @change="img">
                    <img :src="info.phone" width="100" height="100" v-if="info.phone!=''"></td>
                </tr>
                <tr>
                    <td align="right">开业时间</td>
                    <td><input type="date" v-model="info.beginTime"></td>
                </tr>
                <tr>
                    <td align="right">门店状态</td>
                    <td>
                        <input type="radio" name="state" v-model="info.state" :value="false">开启
                        <input type="radio" name="state" v-model="info.state" :value="false">禁用
                    </td>
                </tr>
                 <tr>
                    <td align="right">门店特色</td>
                    <td>
                        <input type="checkbox" name="tese" v-model="info.teSe" value="办婚宴">办婚宴
                        <input type="checkbox" name="tese" v-model="info.teSe" value="升学宴">升学宴
                        <input type="checkbox" name="tese" v-model="info.teSe" value="满月宴">满月宴
                        <input type="checkbox" name="tese" v-model="info.teSe" value="彭于晏">彭于晏
                    </td>
                </tr>
                <tr>
                    <td align="right">联系电话</td>
                    <td><input type="text" v-model="info.tel"></td>
                </tr>
                <tr>
                    <td align="right">门店简介</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="info.desc"> </textarea>
                    </td>
                </tr>
                  <tr>
                    <td align="right">门店地址</td>
                    <td>
                        <select v-model="info.addressId">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in addRessList" >{{ item. shopAddrName}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店类型</td>
                    <td>
                        <select v-model="info.shopType">
                            <option value="">请选择</option>
                            <option value="普通酒店">普通酒店</option>
                            <option value="竞技酒店">竞技酒店</option>
                            <option value="豪华酒店">豪华酒店</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="确定" class="btn btn-success" @click="ok"></td>
                </tr>
            </thead>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import moment, { locales } from 'moment';//时间
import{useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

let info:any=reactive({
    
  "shopName": "",
  "branchName": "",
  "phone": "",
  "beginTime": "",
  "state": true,
  "teSe": [],
  "tel": "",
  "desc": "",
  "addressId": "",
  "shopType": ""
})

const addRessList:any=ref([])

onMounted(()=>{
    getData();
})
//增加操作
const ok=()=>{
    //1.有效行判断
    if(info.userName==""){
        alert("门店名称不能为空");
        return;
    }
     if(info.branchName==""){
        alert("分店名称不能为空");
        return;
    }
     if(info.phone==""){
        alert("图片必填");
        return;
    }
     if(info.beginTime==""){
        alert("开业时间不能为空");
        return;
    }
     if(info.teSe.length==""){
        alert("特色不能为空");
        return;
    }

    if(info.desc.length>50){
        alert("简介长度不超过50");
        return;
    }
    if(info.addressId==""){
        alert("地址必选");
        return;
    }
    if(info.shopType==""){
        alert("酒店类型必选");
        return;
    }
    
    //2.发送网络请求
    info.teSe=info.teSe.toString();
    axios({
        url:'/api/Shops/AddShop',
        method:'post',
        data:info
    }).then((res)=>{
        if(res.data>0){
            alert("添加成功");
            router.push("/addList");
            return;

            
        }else if(res.data==-1){
            alert("门店名重复");
            return;
        }
        else
        {
            alert("门店增加失败");
            return;
        }
    })
};
//获取地址
const getData=()=>{
    axios({
        url:"/api/Shops/GetAddresses",
        method:"get"

    }).then((res)=>{
        console.log(res);
        addRessList.value=res.data;
    })
}

//前端图片上传
const img=(e:any)=>{
    //e:表示事件对象 只要触发事件就会存在事件对象
    // console.log(e.target.file[0]);
    //获取上传的文件
    var obj=e.target.files[0];
    //将长传的文件转成formData格式 转成表单对象并且是键值对形势
    let f=new FormData();//创建空的表单对象
    f.append('file',obj);//和后端一样的
    //发送网络请求实现图片上传
    axios({
        url:'/api/Img/Img',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        if(res.data=="不是图片"){
            alert("您上传的不是图片");
            return;
        }
        if(res.data=="大于2M"){
            alert("您上传的图片大于2M");
            return;
        }
        //长传成功
        info.phone=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>